<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button [routerLink]="['/class-tabs']">
        <ion-icon name="chevron-back-outline"></ion-icon>
        班课
      </ion-button>
    </ion-buttons>
    <ion-title style="padding-left: 33%;">签到</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-text style="padding-left: 5%;font-size: 3px;">选择签到方式</ion-text>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button fill="clear" style="padding-inline-start:10%" (click)='getLocation()'>
          <ion-icon name="person-outline" size="large"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button [routerLink]="['/gesture']" fill="clear"  style="padding-inline-start:12%">
          <ion-icon name="grid-outline" size="large"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button (click)='gotoResult()' fill="clear" style="padding-inline-start:12%">
          <ion-icon slot="icon-only" name="today-outline" size="large"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-label style="padding-left: 5%;" (click)='getLocation()'>一键签到</ion-label>
      </ion-col>
      <ion-col>
        <ion-label style="padding-left: 12%;" [routerLink]="['/gesture']" >手势签到</ion-label>
      </ion-col>
      <ion-col>
        <ion-label style="padding-left: 12%;" (click)='gotoResult()'>签到统计</ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-text style="padding-left: 5%;font-size: 3px;">历史签到记录</ion-text>
  
  <ion-list>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-06-28 星期日 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-06-29 星期一 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-06-30 星期二 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-07-01 星期三 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-07-02 星期四 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-07-03 星期五 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
    <ion-item>
      <ion-label class="ion-text-wrap">
        <ion-text><h3>2020-07-04 星期六 签到</h3></ion-text>
        <ion-text>12:00</ion-text>
      </ion-label>
      <ion-text>5人/5人</ion-text>
    </ion-item>
  </ion-list>
</ion-content>
<!-- 
<ion-footer>
  <div style='text-align:center'>
    <ion-label>未完待续...</ion-label>
  </div>
</ion-footer> -->
